<template>
	<view class="">
		<view class="recommend-item" v-if="detailInfo.id">
			<view class="info-taskType">
				<view class="user-info">
					<image class="head" :src="headHandle(detailInfo)" @click="utils.userDetails(detailInfo.create_account_id)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{allMembers[detailInfo.user_account_id]?allMembers[detailInfo.user_account_id].name:detailInfo.createName}}</text>
						<text class="time">{{detailInfo.update_time&&detailInfo.update_time.split(' ')[0].split('-').join('.')}}</text>
					</view>
				</view>
				<text class="task-type" v-if="detailInfo.task_type">来自{{detailInfo.createName}}的{{detailInfo.task_type==1?'基础任务':detailInfo.task_type==2?'劳动任务':detailInfo.task_type==3?'职业体验任务':detailInfo.task_type==4?'重要他人任务':'乐学园'}}</text>
			</view>
			<view class="task-title" v-if="detailInfo.task_type==3||detailInfo.task_type==4">
				<text>{{detailInfo.task.task_alignment}}</text>
			</view>
			<view :class="{'example-task': detailInfo.task_type==3||detailInfo.task_type==4}">
				<view class="content">
					<text v-if="detailInfo.activity_id">{{detailInfo.content}}</text>
					<text-editor v-else :id-name="`editordetali`" :read-only="true" 
								:info="{content: detailInfo.content, height: 'auto'}"></text-editor>
				</view>				
				<view class="video-box" v-if="detailInfo.video_list">
					<zy-video 
						:ref="'videoRef'"
						:refi="'videoRef'"
						:width="utils.getpx(686)"
						:height="utils.getpx(386)"
						@playVideo="playVideo"
						:src="detailInfo.video_list[0]"></zy-video>
				</view>
				<view class="images-box" :class="{'all-img-file': detailInfo.task_type==3||detailInfo.task_type==4}" v-if="detailInfo.dst_imgs">
					<image class="img" v-for="(path, i) in detailInfo.dst_imgs" :key="i" :src="path" mode="aspectFill" @click="previewImage(detailInfo.dst_imgs, i)"></image>
				</view>
				<view class="all-img-file" v-if="detailInfo.files_show">
		
					<view class="files">
						<zy-file v-for="(file, i) in detailInfo.files_show" :key="i" :src="file.path" :name="file.name" :size="file.size"></zy-file>
					</view>
				</view>
				<view class="key-result border-top" v-if="detailInfo.keyResults">
					<view class="kr-list" v-for="(res, index) in detailInfo.keyResults" :key="index">
						<text-editor :id-name="`editorKeyList${index}`" :read-only="true" 
							:info="{content: res.content, height: 'auto'}"></text-editor>
						<view class="all-img-file" v-if="res.files.length>5">
							<view class="imgs">
								<image class="img" v-for="(path, i) in res.dst_imgs" :key="i" :src="path" mode="aspectFill" @click="previewImage(res.dst_imgs, i)"></image>
							</view>
							<view class="files" v-if="res.files_show">
								<zy-file v-for="(file, i) in res.files_show" :key="i" :src="file.path" :name="file.name" :size="file.size"></zy-file>
							</view>
						</view>
					</view>
				</view>
				<view v-if="detailInfo.activity_id">
					<view class="activity-info" v-if="activityInfo">
						<view class="ac-title">
							<text>{{activityInfo.title}}</text>
						</view>
						<view class="see" @click.stop="activeDetails(activityInfo)">
							<text>查看详情</text>
							<uni-icons type="right" size="28rpx" color="#999999"></uni-icons>
						</view>
					</view>
					<view v-else class="activity-info">活动已删除</view>	
					<view class="" style="margin: 32rpx 0; color: #999999;font-size: 30rpx;">
						荣获：<text style="color: #162641;font-size: 38rpx;font-weight: 600;">{{detailInfo.evaluation}}</text>
					</view>
					<view class="eva-content">
						<view class="info-time">
							<view class="tea-info">
								<image :src="detailInfo.recPic?api.xiaodeObsUrl+detailInfo.recPic:'/static/te1.png'" mode="aspectFill"></image>
								<text v-if="allMembers[detailInfo.evaluate_account_id]">{{allMembers[detailInfo.evaluate_account_id]?allMembers[detailInfo.evaluate_account_id].name:''}}</text>
							</view>
							<text style="color: #999999;font-size: 24rpx;">{{handleTime(detailInfo.evaluate_time)}}</text>
						</view>
						<view class="eva-score">
							<image src="/static/score1.png" v-for="i in detailInfo.score_teacher" :key="i" mode="aspectFill" ></image>
						</view>
						<view class="eva-text">
							{{detailInfo.evaluate_content}}
						</view>
					</view>
				</view>
				<view class="eva-content" v-if="detailInfo.task&&detailInfo.task.score_teacher">
					<view class="info-time">
						<view class="tea-info">
							<image :src="detailInfo.recPic?api.xiaodeObsUrl+detailInfo.recPic:'/static/te1.png'" mode="aspectFill"></image>
							<text>{{detailInfo.recName}}</text>
						</view>
						<text style="color: #999999;font-size: 24rpx;">{{handleTime(detailInfo.update_time)}}</text>
					</view>
					<view class="eva-score">
						<image src="/static/score1.png" v-for="i in detailInfo.task.score_teacher" :key="i" mode="aspectFill" ></image>
					</view>
					<view class="eva-text">
						{{detailInfo.task.evaluate_content}}
					</view>
				</view>
			</view>
			<view class="like-comment">
				<view class="item" @click="likeCampusShare(detailInfo)">
					<image :src="`/static/${selfLike?'likes1':'likes'}.png`" mode="aspectFill"></image>
					<text>{{likeNum>0?likeNum:'点赞'}}</text>
				</view>
				<view class="item">
					<image src="/static/com.png" mode="aspectFill"></image>
					<text>{{totalCommentRow>0?totalCommentRow:'评论'}}</text>
				</view>
				<view class="item" @click="share(detailInfo)">
					<image src="/static/share.png" mode="aspectFill"></image>
					<text>{{detailInfo.forward_num>0?detailInfo.forward_num:'分享'}}</text>
				</view>
			</view>
		</view>
        <view class="evaluation-all">
			<view class="title border-bottom">
				<!-- <uni-icons @click="closePopup" type="closeempty" color="#999" size="50rpx"></uni-icons> -->
				<text>{{totalCommentRow}}条评价</text>
			</view>
			<view class="eva-list" v-if="totalCommentRow>0">
				<view class="eva-item" v-for="(item, index) in commentList" :key="index">
					<view :class="['eva-info-head']" @click="replyEval(item, item.id)">
						<image class="head" @click.stop="utils.userDetails(item.create_account_id)" :src="evaHeadHandle(item)" mode="aspectFill"></image>
						<view class="eva-info" :class="{'border-bottom': item.commentsNum==0}">
							<view>
								<view class="name-time-likes">
									<view class="eva-name-time">
										{{item.createName}}
										<!-- <text class="table">{{item.monthStar?'（月度之星）':''}}</text> -->
										<text class="time">{{dateHandle(item.updateTime)}}日</text>
									</view>
								</view>
								<view class="content eva-cont">
									<text-editor :id-name="`editorEva${index}`" :read-only="true" 
									:info="{content: item.comments, height: 'auto'}"></text-editor>
								</view>
								
							</view>
						</view>
					</view>
					<view v-if="item.commentsNum>0 && !item.showReply" class="comments-num" @click.stop="getfindSecondComments(item.id, item)">—— <text>展开{{item.commentsNum}}条回复</text> <uni-icons type="bottom" size="28rpx" color="#d7d7d7"></uni-icons></view>
					
					<view class="reply-list border-top" v-if="item.showReply&&item.list.length>0">
						<view class="reply-item" v-for="com in item.list" :key="com.id" @click.stop="replyEval(item, com.id, item.id)">
							<image class="head" src="/static/stu1.png" mode="aspectFill"></image>
							<view class="eva-info">
								<view class="name-time-likes">
									<view class="eva-name-time">
										{{com.createName}}
										<!-- <text class="table">{{com.monthStar?'（月度之星）':''}}</text><text class="time">{{dateHandle(com.addTime)}}</text> -->
									</view>
								</view>
								<view class="content" style="display: flex;">
									<text v-if="com.replayName" style="color: #666666;margin-right: 10rpx;white-space: nowrap">回复{{com.replayName}}</text>
									<!-- {{com.comments}} -->
									<text-editor :id-name="`editorEvaReply${com.id}`" :read-only="true" 
									:info="{content: com.comments, height: 'auto'}"></text-editor>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<uni-load-more style="margin-top: 12rpx" :status="com_load_more" :content-text="contentText"></uni-load-more>
			</view>
			
			<view v-else class="no-eva">
				暂无评论
			</view>
			<view class="eva-text-btn">
				<view class="input-box">
					<view class="eva-box">
						<view class="eva-input-box" :style="{width: replyId?'85%':'100%'}">
							<!-- <text class="reply-name" v-if="replyName">回复{{replyName}}：</text> -->
							<view style="width: 80%;max-height: 180rpx;overflow-y: scroll;">
								<text-editor :id-name="`editor`" ref="editor" 
								:info="comInfo"></text-editor>
							</view>
							<image class="icon" @click="showEmoji=!showEmoji" src="/static/chat/bq.png" mode="aspectFill"></image>
							<image class="icon" @click="addComments()" src="/static/send-com.png" mode="aspectFill"></image>
						</view>
						<text class="re-close" v-if="replyId" @click="closeReply">关闭</text>
					</view>
					<view class="emoji-list" v-if="showEmoji">
						<view class="em-icon" @click="clickEmoji(str)" v-for="(str, i) in utils.emojiList" :key="i"><text>{{str}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import textEditor from '../student/components/text-editor.vue'
export default {
    components: {
        textEditor
    },
    data() {
        return {
            detailInfo: {},
			selfLike: 0,
			likeNum: 0,
			likeLoading: false,
            commentList: [],
            totalCommentRow: 0,

            selectShareId: '',
			comInfo: {content: '', height: '24px', type: 'commend', placeText: '写点什么鼓励一下吧'},
			eva_focus: false,
			replyName: '写点什么鼓励一下吧',
			currentEval: {},
			replyId: '',
			replyTopId: '',
			com_load_more: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: '没有更多啦~'
			},
			commPage: 1,
			showEmoji: false,
			activityId: '',
			activityInfo: {},
			allMembers: [],
			accountId: '',
			isRefresh: false
        }
    },
	onShow(){
		if(this.detailInfo.id){
			this.getDetails()
			this.commPage = 1
			this.commentList = []
			this.getfindComments()
		}
	},
    onLoad(options){
        this.taskType = options.type
        this.selectShareId = options.id || options.activity_id
		this.activityId = options.activity_id
		
		this.getDetails()
        
		this.commPage = 1
		this.commentList = []
        this.getfindComments()
		// 获取全校师生
		this.accountId = uni.getStorageSync('tokenObj').accountId
		this.allMembers = uni.getStorageSync('allFindMembers')||[]
    },
	onReachBottom(){
		if(this.com_load_more == 'no-more') return;
		this.commPage++;
		this.getfindComments()
	},
	onUnload(){
		// #ifdef APP-PLUS
		getApp().globalData.isRefreshContent = this.isRefresh
		// #endif
	},
    methods: {
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		headHandle(info){
			// 处理头像显示
			if(!info){
				let accountId = this.detailInfo.evaluate_account_id;
				info = this.allMembers[accountId] || {}
			}else{
				let type = this.allMembers[info.user_account_id]?this.allMembers[info.user_account_id].userType:2
				info.userType = type
				info.avatarUrl = info.pic
			}
			
			
			
			return this.utils.headImage(info)
		},
		// 处理评价头像
		evaHeadHandle(info){
			let type = this.allMembers[info.create_account_id]?this.allMembers[info.create_account_id].userType:2
			info.avatarUrl = info.createPic
			info.userType = type
			return this.utils.headImage(info)
		},
		// 获取详情数据
		getDetails(){
			if(this.activityId){
				this.getOriginalInfo()
			}else{
				if(this.taskType == 3){
					this.getOriginalDetails()
				}else{
					this.getCampusDetails()
				}
				
			}
		},
		// 获取活动的分享详情
		getOriginalInfo(){
			this.api.get('share/findCampusOriginalInfo', {
				campusId: this.activityId
			}).then(res=>{
				if(res.data.state != 'ok') return
				let data = res.data;
				delete data.activityUser.id
				this.activityInfo = data.activity
                this.detailInfo = Object.assign(data.campus, data.activityUser) 
				this.likeNum = data.campus.likeNum
                this.selfLike = data.campus.isLike
			})
		},
		// 获取原创发布详情
		getOriginalDetails(){
			this.api.get('share/findOriginalDetails', {
				originalId: this.selectShareId,
			}).then(res=>{
				if(res.data.state != 'ok') return
                let data = res.data;
                this.detailInfo = data.campus
				this.likeNum = data.likeNum
                this.selfLike = data.isLike
				this.utils.xiaodeShowFiles(this.detailInfo.files, -1, this.detailInfo, this)
			})
		},
		activeDetails(item){
			uni.navigateTo({
				url: `/pages/student/active-details?id=${item.id}&accountId=${this.detailInfo.user_account_id}&original=1`
			})
		},
		// 获取推荐详情
        getCampusDetails(){
            this.api.get('share/findRecommendDetails', {
                recommendId: this.selectShareId,
                // type: this.taskType
            }).then(res=>{
                if(res.data.state != 'ok') return
                let data = res.data;
                this.detailInfo = data.campus
                this.likeNum = data.likeNum
                this.selfLike = data.isLike
                this.totalCommentRow = data.commentNum
				this.utils.xiaodeShowFiles(this.detailInfo.files, -1, this.detailInfo, this)
				let keyRes = this.detailInfo.keyResults
				if(keyRes){
					for(let i=0; i<keyRes.length; i++){
						let res = keyRes[i]

						if(res.files.length>5 && !res.dst_files && !res.dst_imgs){
							this.handleFilesShow(res.files, res)
						}
						
					}
				}
            })
        },
        // 播放视频
		playVideo(refi){
			// console.log(this.$refs.videoRef)
			this.$refs.videoRef.pauseVideo();
		},

		dateHandle(date){
			let str = this.utils.dateFormat(date.split(' ')[0]);
			let curYear = new Date().getFullYear()
			if(date.split('-')[0]==curYear){
				str = str.split('年')[1]
			}
			return str
		},
		// 点赞分享
        likeCampusShare(item){
			if(this.likeLoading) return
			this.likeLoading = true
			this.selfLike = !this.selfLike
            this.api.post('share/likeCampusShare', {
                shareId: item.id,
				shareType: this.taskType
            }).then(res=>{
				this.isRefresh = true
				this.likeLoading = false
                if(res.data.state != 'ok')return;
                if(this.selfLike){
                    this.likeNum += 1;
                }else{
                    this.likeNum -= 1;
                }
            })
        },
        // 回复评论
		replyEval(item, comId, topId){
			if(this.replyId == comId) {
				this.$set(this.comInfo, 'placeText', '写点什么鼓励一下吧')
				this.replyId = '';
				this.eva_focus = false
				return
			}
			this.currentEval = item;
			this.eva_focus = true;
			this.$set(this.comInfo, 'placeText', '@'+item.createName)
			// this.replyName = '@'+item.createName;
			this.replyId = comId
			this.replyTopId = topId || comId
		},
		// 删除评论
		delComments(){
			this.api.post('share/delComments', {
				commentsId: ''
			}).then(res=>{
				if(res.data.state != 'ok')return;
			})
		},

		
		clickEmoji(page){
            this.$refs.editor.clickEmoji(page)
        },
		// 添加评论
		addComments(){
			if(!this.comInfo.content){
				this.utils.showToast('评论内容不能为空')
				return
			}
			let params = {
				shareId: this.selectShareId,
				shareType: this.taskType,
				comment: this.comInfo.content,
			}
			if(this.replyId){
				params.commentsId = this.replyId
				params.topCommentsId = this.replyTopId
			}
			this.api.post('share/addComments', params).then(res=>{
				if(res.data.state == 'ok'){
					this.isRefresh = true
					// uni.showToast({
					//     title: '评价成功',
					//     icon: 'none',
					//     duration: 2000,
					//     mask: true
					// });
					// this.commentContent = ''
					this.$refs.editor.closeHtml()
					this.showEmoji = false;
					if(this.replyId){
						this.getfindSecondComments(this.replyTopId, this.currentEval, 'add')
					}else{
						this.commPage = 1
						this.commentList = []
						this.getfindComments()
					}
				}
			})
		},
		getfindComments(inx){

			this.api.get('share/findComments', {
				shareId: this.selectShareId,
				shareType: this.taskType,
				page: this.commPage,
				limit: 10
			}).then(res=>{
				if(res.data.state != 'ok') return;
				let data = res.data.page || {}
				let list = data.list||[]
				this.commentList = this.commentList.concat(list);

				this.totalCommentRow = res.data.commentNum
				this.evaluation_all = true
				this.com_load_more = 'more'
				if(list.length<10){
					this.com_load_more = 'no-more';
				}

				
			})
		},
		// 获取第二层的评论
		getfindSecondComments(id, comment, type){
			this.api.get('share/findSecondComments', {
				shareId: this.selectShareId,
				topCommentsId: id
			}).then(res=>{
				if(res.data.state != 'ok')return;
				let data = res.data.comments || []
				if(comment.id){
					// comment.list = data.list || []

					this.$set(comment, 'list', data)
					this.$set(comment, 'showReply', true)
					// 更新内容列表里面的评论数量
					if(type=='add'){
						this.totalCommentRow = parseInt(this.totalCommentRow) + 1
					}
					
				}
				
			})
		},
		closeReply(){
			this.$set(this.comInfo, 'placeText', '写点什么鼓励一下吧')
			this.replyId = '';
			this.eva_focus = false
		},
		share(item){
			// return
			let shareImg = this.detailInfo.imgFiles?this.detailInfo.imgFiles[0]:'/static/wdxy_fx.jpg'
			let cont = {img: shareImg, 
				icon: '/static/wdxy_icon.png',
				num: `${item.forward_num+1}人分享过`,
				text: item.content,
				path: `/pages/recommend/details?type=${this.taskType}&id=${item.id}`,
				from: '内容推荐',
				comeFrom: `来自@${item.createName}`,
				taskType: this.taskType,
				taskId: item.id
			}
			let msgInfo = {msgType: 6, content: JSON.stringify(cont)}
			uni.setStorageSync('xdrelayMsg', msgInfo)
			this.isRefresh = true
			uni.navigateTo({
				url: '/pages/noticeInfo/recent-contacts'
			})
		},
        // 获取显示图片的链接
		handleFilesShow(list, item){

			list = JSON.parse(list)
			let imgs = [], files = [], dst_files = [], video_list = []
			for(let i=0; i<list.length; i++){
				if(list[i].msgType==8){
					files.push(list[i].path)
					dst_files.push(list[i])
				}else if(list[i].msgType==1){
					imgs.push(this.api.xiaodeObsUrl+list[i].path)
				}else if(list[i].msgType==3){
					video_list.push(list[i].path)
				}
				
			}
			
			item.files_show = dst_files
			if(imgs.length>0){
				item.dst_imgs = imgs
			}
			if(video_list.length>0){
				item.video_list = video_list
			}
			let keyResults = this.detailInfo.keyResults
			this.$set(this.detailInfo, 'keyResults', keyResults)

			

		},
		previewImage(list, i, info){
			uni.previewImage({
				current: i,
				urls: list,
				longPressActions: {
					itemList: [],
					success: function(data) {
						
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
			
		},
    }
}
</script>
<style lang="less" scoped>
	.recommend-item{
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 32rpx;
		color: #333333;
	}
	.info-taskType{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.task-type{
		font-size: 28rpx;color: #666666;
	}
	.user-info{
		display: flex;
		.head{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-time{
		margin-left: 24rpx;
		.name{
			display: block;
			line-height: 44rpx;
			
		}
		.time{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.task-title{
		margin-top: 32rpx;
		color: #333333;
	}
	.example-task{
		margin-top: 32rpx;
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 0 32rpx;
	}
	.content{
		margin-top: 24rpx;
	}
	.images-box, .video-box{
		margin-top: 40rpx;
	}
	.images-box{
		
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.key-result{
		
	}
	.kr-list{
		padding-top: 32rpx;
		&:last-child{
			&::after{
				border: none;
			}
		}
	}
	.k-text{
		display: flex;
		justify-content: space-between;
		align-items: center;
		textarea{
			width: 90%;
			height: 42rpx;
			font-size: 28rpx;
			margin-bottom: 0;
		}
	}
	.all-img-file{
		margin-top: 32rpx;
		font-size: 0;
		padding-bottom: 12rpx;
		.img{
			width: 194rpx;
			height: 194rpx;
			margin-right: 19rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
		.files{
			margin-top: 12rpx;
		}
	}
	// 活动
	.activity-info{
		margin-top: 32rpx;
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 32rpx;
		color: #999999;
	}
	.ac-title{
		color: #666666;
		line-height: 42rpx;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: pre-line;
	}
	// 评价
	.eva-content{
		margin-top: 64rpx;
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			top: -32rpx;
			content: '';
			width: 200%;
			border-width: 2rpx;
			border-style: dashed;
			border-color: #000;
			transform: scale(0.5) translateX(-50%);
            opacity: .1;
		}
	}
	.info-time{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 78rpx;
			height: 78rpx;
			border-radius: 156rpx;
			margin-right: 24rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		color: #999999;
		image{
			margin-right: 17rpx;
			width: 34rpx;
			height: 32rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.like-comment{
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 44rpx;
			height: 44rpx;
			vertical-align: middle;
		}
		text{
			margin-left: 10rpx;
			font-size: 24rpx;
		}
	}
	.border-top{
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			top: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.border-bottom{
		position: relative;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #EEEEEE;
			transform: scale(0.5) translateX(-50%);
		}
	}
    .evaluation-all{
		font-size: 26rpx;
		background-color: #FFFFFF;
		color: #333333;
		.title{
			padding: 40rpx 32rpx 24rpx;
			position: relative;
			// text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			.uni-icons{
				position: absolute;
				top: 40rpx;
				right: 32rpx;
			}
		}
		.eva-list{
			// height: 642rpx;
			// overflow-y: scroll;
		}
		.reply-item{
			display: flex;
			align-items: center;
			padding: 32rpx 0;
		}
		.eva-item, .reply-item{
			
			.head{
				width: 64rpx;
				height: 64rpx;
				min-width: 64rpx;
				border-radius: 32rpx;
			}
		}
		.eva-info-head{
			padding: 24rpx 32rpx 0;
			display: flex;
			align-items: flex-start;
			&:active{
				background: #f2f2f2;
			}
		}
		.eva-info{
			width: calc(100% - 64rpx);
			margin-left: 20rpx;
			&.border-bottom{
				padding-bottom: 32rpx;
			}
			
		}
		.bottom-line{
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #f2f2f2;
		}
		.comments-num{
			margin: 20rpx 0 0 88rpx;
			color: #d7d7d7;
			text{
				margin: 0 10rpx;
				color: #333;
			}
		}
		.reply-list{
			margin-left: 88rpx; 
			position: relative;
			// &::after{
			// 	position: absolute;
			// 	left: 0;
			// 	top: -50%;
			// 	bottom: -50%;
			// 	content: '';
			// 	width: 200%;
			// 	border-top: 2rpx solid #EEEEEE;
			// 	border-bottom: 2rpx solid #EEEEEE;
			// 	transform: scale(0.5) translateX(-50%);
			// }
		}
		.name-time-likes{
			// height: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.table{
				margin: 0 20rpx;
				color: #F59A23;
			}
			.time{
				margin-left: 20rpx;
				color: #999;
			}
			.likes{
				color: #7f7f7f;
			}
			.uni-icons{
				margin-left: 8rpx;
			}
		}
		.content{
			margin-top: 8rpx;
			line-height: 40rpx;
			font-size: 26rpx;
			
		}
		.eva-text-btn{
			height: 114rpx;
		}

		.input-box{
			position: fixed;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			/* #ifndef H5 */
			left: 0;
			right: 0;
			/* #endif */
			bottom: 0;
			background: #fff;
		}	
		.eva-box{
			
			padding: 20rpx 32rpx;
			display: flex;
			align-items: center;
			background-color: #F9F9F9;
			.re-close{
				margin-left: 16rpx;
				display: inline-block;
				width: 100rpx;
				min-width: 100rpx;
				white-space: nowrap;
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				background-color: #f2f2f2;
				text-align: center;
			}
		}
		.eva-input-box{
			width: 100%;
			min-height: 70rpx;
			border-radius: 20rpx;
			background-color: #ECECEC;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 15rpx 32rpx;
			box-sizing: border-box;
			input{
				width: 90%;
				margin-right: 20rpx;
				font-size: 26rpx;
			}
			.icon{
				width: 44rpx;
				height: 44rpx;
			}
			.reply-name{
				white-space: nowrap;
				margin-right: 8rpx;
			}
		}
	}
	.no-eva{
		text-align: center;
		line-height: 70rpx;
	}
	
	// 表情列表
	.emoji-list{
        padding: 20rpx 32rpx;
		max-height: 440rpx;
		overflow-y: scroll;
		// padding: 0 36rpx;
		.em-icon{
			display: inline-block;
			width: 70rpx;
			text-align: center;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
		}
		text{
			font-size: 52rpx;
			
			&:nth-child(8n){
				margin-right: 0;
			}
		}
	}
</style>